/**
* @file
* @author renzhiqiang
* @date 2017-04-13
*/
<template>
  <div id='wrapper' class="wrapper">
    <div style="display: none">
      <li class="item" id="bankModel"><input type="radio" id="" name="" class="radio" /><label for=""><img src="" /></label></li>
    </div>

    <section class="pay-info">
      <h4 class="proname">{{account.productName}}</h4>
      <p class="price"><span class="font13">{{account.order_amount}}</span>{{account.order_currency}}</p>
    </section>
    <section class="pay-bank">
      <div class="payment">{{language.WeAccept}}<p class="pay-style"></p></div>
      <ul class="payLis clearfix" id="bankList">
      </ul>
      <form id='pay' action="https://secure.oceanpayment.com/gateway/service/pay" method="post">
        <input type="hidden" name="account" value="" />
        <input type="hidden" name="terminal" value="" />
        <input type="hidden" name="order_number" value="" />
        <input type="hidden" name="order_currency" value="" />
        <input type="hidden" name="order_amount" value="" />
        <input type="hidden" name="signValue" value="" />
        <input type="hidden" name="backUrl" value="" />
        <input type="hidden" name="noticeUrl" value="" />
        <input type="hidden" name="billing_firstName" value="" />
        <input type="hidden" name="billing_lastName" value="" />
        <input type="hidden" name="billing_email" value="" />
        <input type="hidden" name="billing_phone" value="" />
        <input type="hidden" name="methods" value="" />
        <input type="hidden" name="pay_bankCode" value="" />
        <input type="hidden" name="billing_country" value="" />
        <input type="hidden" name="billing_city" value="" />
        <input type="hidden" name="billing_address" value="" />
        <input type="hidden" name="billing_zip" value="" />
        <input type="hidden" name="productSku" value="" />
        <input type="hidden" name="productName" value="" />
        <input type="hidden" name="productNum" value="" />
        <button type="submit" id='pays' disabled class="btn">{{language.next}}</button>
        <!--<div @tap='pay' class="btn">Next</div>-->
      </form>
    </section>
  </div>
</template>
<script>
  import store from '../login-store';
  import {tools} from 'tools';
  import {FastClick} from 'fastclick';
  var lan = require('./../language.json');
  var $ = require('jquery');
  export default {
    components: {},
    data: function () {    // 组件的数据格式
      return {
        r: tools.getQueryString('r'),
        account: '',
        language: lan[window.lan]
      };
    },
    methods: {
//      pay: function () {
//        if ($('input[name=pay_bankCode]').attr('value')) {
//          tools.show('loading...');
//          $('#pay').submit();
//        } else {
//          tools.msgShow('Please select a bank card', 3000);
//        }
//      }
    },
    //  created 钩子在实例创建后,在reday之前调用
    created: function () {
      $('head title').html(this.language.OnlineAC);
    },
    route: {
      data: function (data) {
        console.info('答应');
        var self = this;
        tools.show(self.language.load);
        store.DebitCard(this.r, bankList => {
          if (bankList) {
            $('#bankList').empty();
            $.each(bankList, function (i, v) {
              var clone = $('#bankModel').clone();
              clone.removeAttr('id');
              $(clone).find('input').attr('id', v.bankId);
              $(clone).find('input').attr('name', 'bank');
              $(clone).find('input').attr('value', v.bankId);
              $(clone).find('label').attr('for', v.bankId);
              $(clone).find('img').attr('src', v.bankIcon);
              $('#bankList').append(clone);
            });
          };
          $('input[name=bank]').change(function () {
            document.getElementById('pays').removeAttribute('disabled');
            $('input[name=pay_bankCode]').attr('value', $('input[name=bank]:checked').val());
          });
        });
        store.updatePayForm(this.r, result => {
          self.account = result;
          $('input[name=account]').attr('value', result.account);
          $('input[name=terminal]').attr('value', result.terminal);
          $('input[name=order_number]').attr('value', result.order_number);
          $('input[name=order_currency]').attr('value', result.order_currency);
          $('input[name=order_amount]').attr('value', result.order_amount);
          $('input[name=signValue]').attr('value', result.signValue);
          $('input[name=backUrl]').attr('value', result.backUrl);
          $('input[name=noticeUrl]').attr('value', result.noticeUrl);
          $('input[name=billing_firstName]').attr('value', result.bill_firstName);
          $('input[name=billing_lastName]').attr('value', result.bill_lastName);
          $('input[name=billing_email]').attr('value', result.bill_email);
          $('input[name=billing_phone]').attr('value', result.billing_phone);
          $('input[name=methods]').attr('value', result.methods);
          $('input[name=billing_country]').attr('value', result.bill_country);
          $('input[name=billing_city]').attr('value', result.billing_city);
          $('input[name=billing_address]').attr('value', result.billing_address);
          $('input[name=billing_zip]').attr('value', result.billing_zip);
          $('input[name=productSku]').attr('value', result.productSku);
          $('input[name=productName]').attr('value', result.productName);
          $('input[name=productNum]').attr('value', result.productNum);
        });
      }
    },
    ready: function () {
      mui('.mui-scroll-wrapper').scroll();
      FastClick.attach(document.body);
    }
  };
</script>
